<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>《深海》剧照集</title>
<meta name="keywords" content="" />
<meta name="description" content="Ublue jQuery Waterfall" />
<link href="http://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet" type="text/css">
<style type="text/css">
*{margin:0px; padding:0px;}
body{ font:12px/20px  "Electrolize","Microsoft YaHei",tahoma,Arial,sans-serif; color:#666; text-shadow:0 1px 0 #FFF; background:url(images/body_bg.png);}
ul,ol,li{ list-style:none;}
a{ color:#666; text-decoration:none;}
a:hover img{ opacity:.9;}

#waterfall{ margin:50px auto; position:relative;}
.picList{ width:222px; box-shadow:0 0 3px #CCC; background:#FFF; margin:0 6px 12px 6px; position:absolute; display:block;}
.picList:hover{ box-shadow:1px 1px 5px #BBB;}
.picList:hover .shareIcon{ display:block;}
.picList .shareIcon{ display:none; width:100px; height:24px; background:url(images/share_icon.png) no-repeat; cursor:pointer; position:absolute; top:11px; right:11px; z-index:2; opacity:.9;}
.picList .shareIcon:hover{ opacity:1;}
.picThumbnail{ border-bottom:1px solid #EEE;}
.picThumbnail a{ display:block; margin:11px; max-height:600px; overflow:hidden;}
.picThumbnail img{ max-width:200px; display: block;}
.picDescription{ padding:1px; text-align:center; padding:5px 10px; background:#F7F7F7; margin-top:1px;}

.info{ line-height:20px; padding:10px 0; border-bottom:1px solid #E2E2E2; background:rgba(255,255,255,0.2); text-align:center;}
</style>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	/*!
	
	*/
	function waterfall(){
		var wfArea = $("#waterfall"); //显示区域名称
		var wfList = $(".picList"); //内容区域名称
		var wfWidth = wfList.outerWidth(true); //获取内容区域实际宽度（含Margin值）
		var wfArr = new Array(); //创建数组，用来记录内容区域高度
		var maxCol = Math.floor( $(window).width() / wfWidth ); //窗口的宽度除以内容区域宽度，并且向下取整（得出每行能放多少列）
		for(var i = 0; i < wfList.length; i++) { //根据内容区域数量进行循环
			colHeight = wfList.eq(i).outerHeight(true); //获取每个内容区域的高度
			if( i < maxCol ){ //如果i小于maxCol，那就说明是在一行里面（例如每行有4列，那就是4个为一组）
				wfArr[i] = colHeight; //把每组内容区域的高度，放入到数组中
				wfList.eq(i).css("top",0); //第一行Li的默认Top值为0
				wfList.eq(i).css("left",i * wfWidth); //每个列的Left值就是当前列数*内容区域宽度
			}else{
				minHeight = Math.min.apply(null,wfArr); //比较数值中的值，取得最小值（也就是每行中，最小高度）
				minCol = getArrayKey(wfArr, minHeight); //最小的值对应的指针
				wfArr[minCol] += colHeight; //加上新高度后更新高度值
				wfList.eq(i).css("top",minHeight); //先得到高度最小的Li，然后把接下来的li放到它的下面
				wfList.eq(i).css("left",minCol * wfWidth); //第i个列的左坐标就是i*列的宽度
			}
			wfList.eq(i).attr('id',"post_"+i);
		};
		function getArrayKey(s, v) { //使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) 
			for( k in s ) {
				if( s[k] == v)  {
					return k;
				}
			}
		};
		var fwLastLayerT = parseInt(wfList.last().css("top")); //最后一个元素的Top值
		var fwLastLayerH = wfList.last().outerHeight(true); //最后一个元素的高度
		var wfAreaH = fwLastLayerT + fwLastLayerH + "px"; //显示区域的高度为 最后一个元素的Top值+自身高度
		wfArea.css({ "width":wfWidth * maxCol,"height":wfAreaH }); //设置显示区域宽度和高度
	 }
	window.onload = function() { waterfall(); } //当页面加载完毕，执行函数
	$(window).resize(function(){ //当窗口改变时，执行函数
		waterfall();
	});
});
</script>
</head>
<body>

<div class="info">
	<p style="font-size: medium;">深海的剧照集</p>
	<a href="index.html"><p style="font-size:small; color: green;">【返回首页在这里~】 &nbsp;&nbsp;
		 shenhai.com <script src="" language="JavaScript"></script></p></a> 
</div>

<div id="waterfall">
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img1.webp"></a>
		</div>
		<div class="picDescription">
			<p>1080x820
				</p>
			<p>41回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img2.webp"></a>
		</div>
		<div class="picDescription">
			<p>1786x858
				</p>
			<p>5回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img3.webp"></a>
		</div>
		<div class="picDescription">
			<p>3840x2160
				</p>
			<p>电影《深海》剧照-参... 14回应</p>
		</div>
	</div>

	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img4.webp"></a>
		</div>
		<div class="picDescription">
			<p>3840x2160
				</p>
			<p>电影《深海》剧照-南... 31回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img5.webp"></a>
		</div>
		<div class="picDescription">
			<p>1707x960
				</p>
			<p>2回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img6.webp"></a>
		</div>
		<div class="picDescription">
			<p>2105x1232
				</p>
			<p>1回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img7.webp"></a>
		</div>
		<div class="picDescription">
			<p>1786x858
				</p>
			<p>6回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img8.webp"></a>
		</div>
		<div class="picDescription">
			<p>1707x960
				</p>
			<p>1回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img9.webp"></a>
		</div>
		<div class="picDescription">
			<p>1707x960
				</p>
			<p>1回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img10.webp"></a>
		</div>
		<div class="picDescription">
			<p>1回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img11.webp"></a>
		</div>
		<div class="picDescription">
			<p>960x979</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img12.webp"></a>
		</div>
		<div class="picDescription">
			<p>960x960
				</p>
			<p>8回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img13.webp"></a>
		</div>
		<div class="picDescription">
			<p>960x960
				</p>
			<p>17回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img14.webp"></a>
		</div>
		<div class="picDescription">
			<p>1707x960
				</p>
			<p>1回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img15.webp"></a>
		</div>
		<div class="picDescription">
			<p>		
				1707x960
				</p>
			<p>3回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img16.webp"></a>
		</div>
		<div class="picDescription">
			<p>1920x1073
				</p>
			<p>2回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img17.webp"></a>
		</div>
		<div class="picDescription">
			<p>1786x858
				</p>
			<p>49回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img18.webp"></a>
		</div>
		<div class="picDescription">
			<p>1707x960
				</p>
			<p>从前有只白色的小海豹... 1回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img19.webp"></a>
		</div>
		<div class="picDescription">
			<p>960x979
				</p>
			<p>1回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img20.webp"></a>
		</div>
		<div class="picDescription">
			<p>1920x1080
				</p>
			<p>电影《深海》完整片头...</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img21.webp"></a>
		</div>
		<div class="picDescription">
			<p>1920x1080
				</p>
			<p>电影《深海》完整片头...</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img22.webp"></a>
		</div>
		<div class="picDescription">
			<p>1920x1080
				</p>
			<p>电影《深海》完整片头...</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img23.webp"></a>
		</div>
		<div class="picDescription">
			<p>1080x965
				</p>
			<p>1回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img24.webp"></a>
		</div>
		<div class="picDescription">
			<p>1080x965
				</p>
			<p>1回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img25.webp"></a>
		</div>
		<div class="picDescription">
			<p>1707x960
				</p>
			<p>1回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img26.webp"></a>
		</div>
		<div class="picDescription">
			<p>1707x960</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img27.webp"></a>
		</div>
		<div class="picDescription">
			<p>1920x1080
				</p>
			<p>“光遇海”系列剧照 3回应</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img28.webp"></a>
		</div>
		<div class="picDescription">
			<p>2667x1500</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img29.webp"></a>
		</div>
		<div class="picDescription">
			<p>1707x960</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img30.webp"></a>
		</div>
		<div class="picDescription">
			<p>1786x858</p>
		</div>
	</div>
	<div class="picList">
		<i class="shareIcon"></i>
		<div class="picThumbnail">
			<a href="#"><img src="images/sea/img31.webp"></a>
		</div>
		<div class="picDescription">
			<p>1920x1080
				</p>
				<p>电影《深海》完整片头...</p>
		</div>
	</div>
</div>

</body>
</html>